// 
// Custom Material Design Toggle
// 
.custom-toggle {
  display: block;
  min-height: 40px;
  input[type="checkbox"] {
    display: none;
  }
  label {
    cursor: pointer;
    height: 0px;
    position: relative;
    width: 40px;
  }
  &>label::before {
    background: rgb(0, 0, 0);
    border-radius: 8px;
    content: '';
    height: 16px;
    margin-top: -8px;
    position: absolute;
    opacity: 0.3;
    transition: all 0.3s ease;
    width: 40px;
  }
  &>label::after {
    background: rgb(255, 255, 255);
    border-radius: 16px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
    content: '';
    height: 24px;
    left: -4px;
    margin-top: -8px;
    position: absolute;
    top: -4px;
    transition: all 0.3s ease;
    width: 24px;
  }
  &>input[type="checkbox"]:checked+label::before {
    background: inherit;
    opacity: 0.5;
  }
  &>input[type="checkbox"]:checked+label::after {
    background: inherit;
    left: 20px;
  }
}

@each $color,
$value in $md-colors {
  .custom-toggle-#{$color} {
    background-color: $value;
  }
}

// User Center Search input
.input-group-custom {
  .form-control {
    border: 0;
    width: 320px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    background: $home-sidebar;
    color: rgba($black, 0.7);
    transition: width 0.15s ease-in-out;
    &:focus {
      border-color: theme-color("primary");
      box-shadow: 0 0 0 0;
    }
    &::placeholder {
      color: rgba($black, 0.25);
    } // 表单扩展
    // &.extend {
    //   width: 320px;240
    // }
  }
  .btn {
    display: flex;
    align-items: center;
    border: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    background: $home-sidebar;
    color: rgba($black, 0.35);
    border-left: 0;
    transition: color 0.15s ease-in-out;
    &:focus {
      box-shadow: 0 0 0 0;
    }
    &.active {
      color: theme-color("primary");
    }
  }
}

.input-group-custom.primary {
  .form-control {
    background-color: white;
  }
  .btn {
    background-color: white;
    @include hover-focus {
      color: theme-color("primary");
    }
  }
}